
import React , {FC, useRef,useState} from 'react'
import MyTitle from '../../components/Title'
import { UserOutlined, LockOutlined ,MobileOutlined,UploadOutlined} from '@ant-design/icons';
import {Form,Input,Row,Col,Select, Button , Image } from 'antd'
import { annoTypeList } from '../../utils';
import { ajax } from './../../api/index';
import { baseURL } from '../../api/request';
import { inject, observer } from 'mobx-react';

import { useNavigate } from 'react-router-dom';


const {TextArea}=Input;
const {Option}=Select



const AnnoAdd:FC<any>=({
uinfo
})=> {
  const [form]=Form.useForm()
  const file:any=useRef()
  const  Navigate=useNavigate() 
  const [path,setPath]=useState<any>('')
 
  const onFinish = async (value:any)=>{
    console.log(value);
    value.info=uinfo.userInfo;
   let {code,result}= await ajax.addanno(value)
   if(code==200){
    Navigate("/main/anno/list")
   }
  }
  const onFinishFailed = ()=>{
  
  }
  const todoUpload = ()=>{
    file.current.click()
  }
  const uploadFile = async ()=>{
    const filedata = file.current.files[0]
    const data = new FormData()
    data.append("file",filedata)
  
    let res = await ajax.uploadfile(data)
    if(res.code==200){
       setPath(res.path)
       form.setFieldsValue({'desc':res.path})
    }
  }
  const resetFields =()=>{
    form.resetFields()
    setPath(null)
  }
  return (
    <Row>
    <Col span={8}>
     <MyTitle text="公告新增"/>
       <Form
           name="normal_login"
           className="myform"

           onFinish={onFinish}
           onFinishFailed={onFinishFailed}
           form={form}
           layout={"vertical"}
       >
         <Form.Item
             name="title"
             label="公告标题"
             rules={[{ required: true, message: '请输入公告标题' }]}
         >
             <Input  placeholder="公告标题" />
         </Form.Item>
         <Form.Item
             name="content"
             label="公告内容"
             rules={[{ required: true, message: '请输入公告内容' }]}
         >
             <TextArea  placeholder="公告内容" />
         </Form.Item>
         <Form.Item
             name="type"
             label="公告类型"
             rules={[{ required: true, message: '请选择' }]}
         >
             <Select  style={{ width: '100%' }} >
               {
                 annoTypeList.map((l,i)=>(
                   <Option key={i}  value={l.value}>{l.label} </Option>
                 ))
               }
             </Select>
         </Form.Item>
         <Form.Item
             name="desc"
             label="公告描述"
             
         >
             {/* 上传图片 form.getFieldValue('desc')&& */  }
             {
              path && <Image src={path.replace(/public/,baseURL)} style={{width:200,height:120,marginTop:20}} />
             }
             <input type="file"  ref={file} onChange={uploadFile}  style={{display:'none'}} />
             <Button style={{display:'block',marginTop:15}} onClick={todoUpload} icon={<UploadOutlined />}>上传公告图片描述</Button>
         </Form.Item>
         <Form.Item>
            <Row>
              <Col span={11}>
                 <Button type="primary" style={{width:'100%'}} htmlType="submit">添加公告</Button>
              </Col>
              <Col span={11} offset={1} >
                 <Button danger style={{width:'100%'}} onClick={resetFields} >重置</Button>
              </Col>
            </Row>
         </Form.Item>
       </Form>
    </Col>
 </Row>
   
  
  )
}

export default inject('uinfo')(observer(AnnoAdd))